<template>
<view>
<!--pages/topicality/xiaofeiquan/xiaofeiquan.wxml-->
<!--<import src="../../webview/contact.wxml"></import>-->
<!-- <template is="inContact" data="{{showtk}}" /> -->
<view class="body">
  <!--  -->
  <image src="http://imgbdb3.bendibao.com/xcx/20205/20/2020520151108_56661.jpg" class="main-img">
    <view class="city-box">
      <text>{{city}}</text>
      <!-- <image src="/images/dwicon.png"></image> -->
    </view>
    <view class="change-city">
      <view style="display: flex;align-items: center;">
        <text style="margin-left: 70rpx;">切换城市:</text>
        <picker @change="bindProv" :value="pindex" :range="provPick">
          <view class="sel-city">
            <view class="picker">
              <text>{{provPick[pindex]}}</text>
            </view>
            <image src="/static/images/dwicon.png"></image>
          </view>
        </picker>
        <picker @change="bindCity" :value="cindex" :range="cityPick">
          <view class="sel-city">
            <view class="picker">
              <text>{{cityPick[cindex]}}</text>
            </view>
            <image src="/static/images/dwicon.png"></image>
          </view>
        </picker>
      </view>
      <view class="search">
        <view class="search-box">
          <input placeholder="请输入区域查询" placeholder-style="color:#A7A6A6;font-size:22rpx;" :value="quValue" @confirm="searchQu" @input="inputQu">
        </view>
        <view class="chaxun" @tap="searchBtn">查询</view>
      </view>
      <view class="renew">当前页面更新时间：{{updateTime}}时</view>
    </view>
  </image>

  <!-- 内容 -->
  <view class="yq-content">
    <view v-for="(item, index) in quList" :key="index" class="djbox">
      <text style="color:#141414;">{{item.qu}}</text>
      <text :style="'color:' + djcolor[item.level]">{{item.level}}</text>
    </view>
  </view>

  <view class="fgx"></view>
  <!-- 播报 -->
  <navigator class="bobao" url="./broadcast/broadcast">
    <view class="bobao-border">
      <image src="http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209162734_14198.png"></image>
      <view class="bobao-content">
        <view class="bobao-title">全国风险区播报</view>
        <view class="bobo-detail">高风险区详情，中风险区详情 ，每日更新</view>
      </view>
    </view>
    <image src="/static/images/arrow-right.png" class="arrow-right"></image>
  </navigator>

  <view class="fgx"></view>
  <!-- 防疫工具箱 -->
  <view class="fangyi-tools">
    <view class="tit">
      防疫工具箱
    </view>
    <view class="tools-content">
      <view v-for="(item, index) in toolArr" :key="index" class="single-box" :data-index="index" :data-path="item.href" :data-appid="item.appid" @tap="toTool" :data-title="item.name">
        <image :src="item.img"></image>
        <view class="name">
          {{item.name}}
        </view>
      </view>
    </view>
  </view>

  <!-- 轮播图 -->
  <swiper class="banner-content" indicator-dots autoplay v-if="bannerArr.length!=0">
    <swiper-item v-for="(item, index) in bannerArr" :key="index">
      <image class="banner" :src="item.img" :data-path="item.href" @tap="toBannerDetail">
      </image>
    </swiper-item>
  </swiper>
  
  <!-- 导粉 -->
  <view class="daofen" v-if="infoData.daofen">
    <rich-text :nodes="infoData.daofen.content" style="user-select:text;-webkit-user-select:text">
    </rich-text>
  </view>
  <view class="fgx"></view>
</view>
<!-- 快捷导航 -->
<fastnav :qrcodeimg="qrcodeimg" :citycode="citycode" :showNav="showNav" :showShare="showShare"></fastnav>
<!-- 底部按钮 -->
<view class="fixed">
  <button class="share" @tap="openShare">
    <view>
      <view>分享</view>
      <image class="share-icon" src="http://imgbdb3.bendibao.com/whbdb/20202/28/20200228094105_67638.png"></image>
    </view>
  </button>
  <navigator class="other-city" @tap="toHome">
    查看更多{{city}}本地资讯
  </navigator>
</view>
<view class="bottom-mask" v-if="openShare"></view>
<view class="bottom-share-box flex col" v-if="openShare">
  <view class="flex around">
    <button class="shar-box-item row col center" open-type="share">
      <image src="http://imgbdb3.bendibao.com/whbdb/202012/4/20201204171442_36037.png" mode="aspectFit" class="share-box-img"></image>
      <text class="share-box-path">分享给好友</text>
    </button>
    <view class="line"></view>
    <button class="shar-box-item row col center" @tap="shareBtn">
      <image src="http://imgbdb3.bendibao.com/whbdb/202012/4/20201204171504_27664.png" mode="aspectFit" class="share-box-img"></image>
      <text class="share-box-path">分享到朋友圈</text>
    </button>
  </view>
  <view class="cancel" @tap="closeShare">取消</view>
</view>
<popupshare class="popupshare" :showModalStatus="showModalStatus" image="/images/share-geli.jpg"></popupshare>
</view>
</template>

<script>
// pages/topicality/xiaofeiquan/xiaofeiquan.js
//获取应用实例
const app = getApp();
const util = require("../../../utils/util.js");
var QQMapWX = require("../../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js");
var qqmapsdk = new QQMapWX({
  key: 'KR7BZ-XSQ3P-VGFD7-LNRZL-E7PXE-STF76'
});
import fastnav from "../../../component/fastnav/fastnav";
import popupshare from "../../../component/shareMoments/shareMoments";

export default {
  data() {
    return {
      citycode: "sz",
      city: '深圳',
      province: '广东',
      pindex: 0,
      cindex: 0,
      cityPick: ["选择城市"],
      showtk: false,
      showNav: true,
      // 快捷导航是否展开
      djcolor: {
        "低风险": "#FFAA85",
        "中风险": "#CC2929",
        "高风险": "#660208"
      },
      showShare: true,
      // 显示分享按钮
      quValue: "",
      toolArr: [],
      //工具箱
      bannerArr: [],
      provPick: [],
      updateTime: "",
      quList: [],
      qrcodeimg: "",
      openShare: false,
      showModalStatus: "",
      cityArray: "",
      citylist: "",
      infoData: ""
    };
  },

  components: {
    fastnav,
    popupshare
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    util.reportMessage("fangwenliang", {
      action: "疫情等级"
    });
    util.getUrl(app.globalData.url).then(res => {
      this.getProvinceData(options.city);
      if (options.qu) this.setData({
        quValue: options.qu
      });
    });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: this.infoData ? this.infoData.title : "疫情等级查询"
    };
  },
  // 分享朋友圈
  onShareTimeline: function () {
    return {
      title: this.infoData ? this.infoData.title : "疫情等级查询",
      imageUrl: "http://imgbdb3.bendibao.com/xcx/20205/20/2020520151108_56661.jpg",
      query: {
        city: this.citycode
      }
    };
  },
  methods: {
    // 跳转主页
    toHome() {
      uni.reLaunch({
        url: '/pages/index/index?city=' + this.citycode
      });
    },

    // 获取工具箱
    getTools(citycode) {
      util.request('zhuanti.php', {
        action: "geli_tools",
        citycode: citycode
      }, "POST").then(e => {
        this.setData({
          toolArr: e.data.data
        });
      });
    },

    // 获取轮播banner
    getBanners(citycode) {
      util.request('citycode.php', {
        action: 'lunbo',
        citycode: citycode
      }, 'POST').then(e => {
        this.setData({
          bannerArr: e.data.data
        });
      });
    },

    // 前往工具箱详情
    toTool(e) {
      let path = e.currentTarget.dataset.path;
      let linkname = e.currentTarget.dataset.title;
      let appid = e.currentTarget.dataset.appid || '';

      if (path) {
        if (path.indexOf("pages") == -1 && path.indexOf("mp.weixin.qq.com") == -1 && !appid) {
          util.navContact(linkname, path);
        } else {
          util.navMethod(path, appid);
        }
      } else {
        uni.showToast({
          title: '还没有这个入口哦~',
          icon: 'none'
        });
      }
    },

    //banner详情
    toBannerDetail(e) {
      let path = e.currentTarget.dataset.path;
      let linkname = e.currentTarget.dataset.title;
      let appid = e.currentTarget.dataset.appid || '';

      if (path) {
        if (path.indexOf("pages") == -1 && path.indexOf("mp.weixin.qq.com") == -1 && !appid) {
          util.navContact(linkname, path);
        } else {
          util.navMethod(path, appid);
        }
      } else {
        uni.showToast({
          title: '还没有这个入口哦~',
          icon: 'none'
        });
      }
    },

    // 分享按钮
    shareBtn(e) {
      this.setData({
        showModalStatus: true,
        openShare: false
      });
    },

    openShare() {
      this.setData({
        openShare: true
      });
    },

    closeShare() {
      this.setData({
        openShare: false
      });
    },

    // 定位
    getLocation() {
      qqmapsdk.reverseGeocoder({
        success: res => {
          let city = res.result.address_component.city; // let city="芜湖市";

          if (city) {
            let citydata = this.citylist.filter(v => {
              if (city.indexOf(v.cityname) != -1) {
                return v;
              }
            });

            if (citydata != '' && city.indexOf(this.city) == -1) {
              uni.showModal({
                content: '您当前定位城市为' + city + '\n是否需要切换到' + city + '疫情等级查询？',
                success: res => {
                  if (res.confirm) {
                    // let citydata = this.data.citylist.filter(v => {
                    //   if (city.indexOf(v.cityname) != -1) {
                    //     return v;
                    //   }
                    // });
                    this.setData({
                      city: Array.isArray(citydata) ? citydata[0].cityname : this.city,
                      citycode: Array.isArray(citydata) ? citydata[0].citycode : this.citycode,
                      province: Array.isArray(citydata) ? citydata[0].province : this.province,
                      cityPick: ["选择城市"]
                    });
                    let clist = [];
                    this.provPick.forEach((v, k) => {
                      if (v == this.province) {
                        this.setData({
                          pindex: k
                        });
                      }
                    });
                    this.cityArray[this.pindex].citylist.forEach(v => {
                      clist.push(v.cityname);
                    });
                    this.setData({
                      cityPick: this.cityPick.concat(clist)
                    });
                    this.cityPick.forEach((v, k) => {
                      if (v == this.city) {
                        this.setData({
                          cindex: k
                        });
                      }
                    }); // 获取城市公众号二维码

                    this.getQrcode(this.citycode);
                    this.getInfoData(this.citycode);
                  }
                }
              });
            }
          }
        }
      });
    },

    // 获取城市公众号二维码
    getQrcode(citycode) {
      util.cityConfig(citycode).then(res => {
        this.setData({
          qrcodeimg: res.qrcode
        });
      });
    },

    // 获取有疫情等级的城市
    getProvinceData(optcode) {
      let data = {
        action: 'yqdengji',
        type: "city"
      };
      util.request('zhuanti.php', data).then(res => {
        this.setData({
          cityArray: res.data.data.city
        });
        let provPick = [];
        let citylist = [];
        let clist = [];
        this.cityArray.forEach(v => {
          v.citylist.forEach(v => {
            citylist.push(v);
          });
          provPick.push(v.province);
        });
        this.setData({
          provPick,
          citylist
        });

        if (this.citylist) {
          this.citylist.forEach((v, k) => {
            if (optcode == v.citycode) {
              this.citycode = v.citycode;
              this.city = v.cityname;
              this.province = v.province;
            } else {
              this.citycode = this.citycode;
              this.city = this.city;
              this.province = this.province;
            }
          });
          this.setData({
            citycode: this.citycode,
            city: this.city,
            province: this.province
          });
        }

        this.provPick.forEach((v, k) => {
          if (v == this.province) {
            this.setData({
              pindex: k
            });
          }
        });
        this.cityArray[this.pindex].citylist.forEach(v => {
          clist.push(v.cityname);
        });
        this.setData({
          cityPick: this.cityPick.concat(clist)
        });
        this.cityPick.forEach((v, k) => {
          if (v == this.city) {
            this.setData({
              cindex: k
            });
          }
        }); // 获取城市公众号二维码

        this.getQrcode(this.citycode);
        this.getTools(this.citycode);
        this.getBanners(this.citycode);
        this.getInfoData();

        if (this.citylist != "" && Array.isArray(this.citylist) && !optcode) {
          // 获取定位
          this.getLocation();
        }
      });
    },

    // 获取数据
    getInfoData(citycode) {
      let data = {
        action: 'yqdengji',
        citycode: citycode ? citycode : this.citycode
      };
      util.request('zhuanti.php', data).then(res => {
        if (res.data.data.daofen) {
          res.data.data.daofen.content = res.data.data.daofen.content.replace(/<p([\s\w"=\/\.:;]+)((?:(="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p').replace(/<p>/ig, '<p class="p_class">').replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1').replace(/<img/gi, '<img style="width:100%;height:auto"'); // .replace(/<span>/ig, '<p class="p_class">')
        }

        uni.setNavigationBarTitle({
          title: res.data.data ? res.data.data.title : "疫情等级"
        });
        this.setData({
          infoData: res.data.data,
          quList: res.data.data.dengji,
          updateTime: util.timestamp(res.data.data.update_at, 'Y-M-D h')
        });
        if (this.quValue) this.searchData(this.quValue);
      });
    },

    // 搜索区域
    searchData(value) {
      let searchRes = [];

      if (this.quList) {
        searchRes = this.infoData.dengji.filter(v => {
          if (v.qu.includes(value)) {
            return v;
          }
        });
      }

      if (searchRes != '') {
        this.setData({
          quList: searchRes
        });
      } else {
        uni.showModal({
          content: '未找到相关区域信息，请重新查询',
          showCancel: false,
          confirmText: "我知道了"
        });
      }
    },

    // 省份选择
    bindProv: function (e) {
      this.setData({
        pindex: e.detail.value,
        cindex: 0,
        cityPick: ["选择城市"]
      });
      let clist = [];
      this.cityArray[this.pindex].citylist.forEach(v => {
        clist.push(v.cityname);
      });
      this.setData({
        cityPick: this.cityPick.concat(clist)
      });
    },

    // 城市选择
    bindCity(e) {
      this.setData({
        cindex: e.detail.value
      });
      let cityname = this.cityPick[this.cindex];

      if (this.citylist) {
        this.citylist.forEach(v => {
          if (v.cityname == cityname) {
            let citycode = v.citycode;
            this.setData({
              citycode,
              city: cityname
            });
          }
        });
      } // 获取城市公众号二维码


      this.getQrcode(this.citycode);
      this.getInfoData(this.citycode);
    },

    // 进入客服会话
    contact() {
      this.setData({
        showtk: false
      });
    },

    // 关闭
    close() {
      this.setData({
        showtk: false
      });
    },

    // 搜索输入事件
    inputQu(e) {
      let quValue = e.detail.value;
      this.setData({
        quValue
      });
    },

    // 搜索区域
    searchQu(e) {
      let quValue = e.detail.value;
      this.setData({
        quValue
      });
      this.searchData(quValue);
    },

    // 查询按钮
    searchBtn() {
      this.searchData(this.quValue);
    },

    /**
     * 页面滑动事件的处理函数
     */
    onPageScroll: function (e) {
      this.setData({
        showNav: false
      });
    }
  }
};
</script>
<style>
/* pages/topicality/xiaofeiquan/xiaofeiquan.wxss */

.body{
    padding-bottom: 110rpx;
}
.main-img {
    width: 100%;
    height: 276rpx;
}

.city-box {
    background: #ffffff;
    border-radius: 35rpx;
    padding: 10rpx 30rpx;
    position: absolute;
    top: 40rpx;
    right: 30rpx;
}

.city-box text {
    font-size: 30rpx;
    font-weight: bolder;
}

.city-box image {
    width: 23rpx;
    height: 15rpx;
    margin-left: 10rpx;
}

.change-city {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 6rpx 6rpx rgba(0, 0, 0, 0.16);
    opacity: 1;
    border-radius: 20rpx;
    padding: 30rpx 0rpx;
    position: absolute;
    top: 235rpx;
    width: 90%;
    margin-left: 36rpx;
}

.change-city text {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 36rpx;
    color: rgba(20, 20, 20, 1);
    opacity: 1;
    width: 130rpx;
    text-align: center;
    white-space: nowrap;
}

.sel-city {
    display: flex;
    align-items: center;
    margin-left: 70rpx;
}

.sel-city image {
    width: 19rpx;
    height: 10rpx;
    margin-left: 30rpx
}

.search {
    display: flex;
    align-items: center;
    margin: 30rpx 50rpx 20rpx 60rpx;
}

.search-box {
    background: rgba(238, 238, 238, 1);
    opacity: 1;
    border-radius: 28rpx;
    padding: 8rpx 30rpx;
    flex: 1
}

.search-box input {
    font-size: 25rpx;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 32rpx;
}

.chaxun {
    background: rgba(81, 149, 221, 1);
    border-radius: 28rpx;
    margin-left: 20rpx;
    font-size: 25rpx;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 32rpx;
    color: rgba(255, 255, 255, 1);
    opacity: 1;
    padding: 10rpx 30rpx;
}

.renew {
    width: 90%;
    display: flex;
    justify-content: flex-end;
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 300;
    line-height: 26rpx;
    color: rgba(184, 184, 184, 1);
}

.yq-content {
    margin: 230rpx 36rpx 30rpx 36rpx;
}

.djbox {
    background: rgba(242, 244, 252, 1);
    opacity: 1;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 50rpx;
    margin-bottom: 25rpx;
}

.djbox text {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    opacity: 1;
}


/* 导粉 */

.daofen {
    margin-bottom: 80rpx;
    text-align: center;
}

.p_class {
    margin: 10rpx 30rpx;
    line-height: 50rpx;
}

@media (min-width: 1024px) {
    .search-box {
        height: 20rpx;
        line-height: 20rpx;
    }
    .search-box input {
        height: 20rpx;
        line-height: 20rpx;
        font-size: 20rpx;
    }
}
/* 播报 */
.bobao {
    height: 138rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 39rpx;
    margin: 20rpx 0;
    line-height: 138rpx;
    border-radius: 16rpx;
    background-color: #F8F8F8;
}

.bobao-border {
    display: flex;
    align-items: center;
}

.bobao-border image {
    width: 62rpx;
    height: 51rpx;
    margin-right: 31rpx;
}

.bobao-title {
    margin-bottom: 18rpx;
    font-size: 30rpx;
    line-height: 30rpx;
    font-weight: bold;
    color: #333333;
}

.bobo-detail {
    font-size: 25rpx;
    line-height: 25rpx;
    color: #666666;
}

.arrow-right {
    width: 17rpx;
    height: 31rpx;
}
.fgx {
    height: 16rpx;
    background: #f7f7f7;
}

/* 防疫工具箱 */
.fangyi-tools {
    margin: 0 auto;
    box-sizing: border-box;
    padding: 42rpx 0 20rpx 43rpx;
    width: 702rpx;
    background: #ffffff;
    border-radius: 22rpx;
}

.fangyi-tools .tools-content {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30rpx;
}

.fangyi-tools .tools-content .single-box {
    width: 147rpx;
    margin-right: 14rpx;
    margin-bottom: 26rpx;
    text-align: center;
}

.fangyi-tools .tools-content .single-box:nth-child(4n) {
    margin-right: 0;
}

.fangyi-tools .tools-content .single-box image {
    width: 102rpx;
    height: 102rpx;
    margin-bottom: 11rpx;
}

.fangyi-tools .tools-content .single-box .name {
    line-height: 23rpx;
    font-size: 24rpx;
    font-family: PingFang SC Medium, PingFang SC Medium-Medium;
    font-weight: 500;
    text-align: center;
    color: #000000;
}
/* 轮播图 */
.banner-content{
    margin: 0 auto;
    margin-top: 20rpx;
    width: 720rpx;
}
.banner{
    width: 720rpx;
    height: 250rpx;
    border-radius: 20rpx;
}

/* 底部fixed */
.fixed {
	position: fixed;
	bottom: 0;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin: auto;
	background: #fff;
	padding: 10rpx 0;

}

.share {
	width: 35%;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 56rpx;
	color: #ffffff;
	font-weight: 500;
	background-color: #5395DE;
	margin-left: 20rpx;
}

.share view {
	display: flex;
	justify-content: center;
	align-items: center;
}

.share-icon {
	width: 30rpx;
	height: 30rpx;
	margin-left: 10rpx;
}

.other-city {
	width: 65%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border: 0;
	border-radius: 56rpx;
	margin-left: 20rpx;
	margin-right: 20rpx;
	margin-top: 10rpx;
	color: #ffffff;
	background: #5395DE;
}
.bottom-mask {
  position: fixed;
  bottom: 0;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, .4);
}

.bottom-share-box {
  position: fixed;
  bottom: 0;
  height: 380rpx;
  width: 100%;
  justify-content: space-between;
  padding-top: 80rpx;
  background-color: rgb(251, 253, 250);
  border-top-left-radius: 54rpx;
  border-top-right-radius: 54rpx;
  overflow-x: hidden;
  z-index: 999999;
}

.bottom-share-box .flex {
  padding: 20rpx 20%;
  z-index: 99;
  box-sizing: border-box;
}

.bottom-share-box .share-box-img {
  width: 100rpx;
  margin-bottom: 16rpx;
}

.bottom-share-box .share-box-path {
  font-size: 24rpx;
}

.bottom-share-box .flex {
  width: 100%;
}

.line {
  height: 60rpx;
  border-right: 2rpx solid #ccc;
}

.cancel {
  width: 100%;
  height: 102rpx;
  margin-top: 30rpx;
  line-height: 102rpx;
  font-size: 34rpx;
  text-align: center;
  background-color: #FFFFFF;
}

button {
  padding: 0;
  margin: 0;
  background-color: transparent;
}

.share-box {
  margin-bottom: 60rpx;
  margin-top: 40rpx;
}

.share-box-img {
  width: 100rpx;
  height: 100rpx;
}

.shar-box-item {
  line-height: normal;
}

.share-box-title {
  width: 100%;
  margin-bottom: 58rpx;
  font-size: 32rpx;
  color: #BFBFBF;
  text-align: center;
}

.share-box-path {
  font-size: 22rpx;
  color: #141414;
}

.shar-box-list {
  width: 70%;
}

</style>